<template>
  <van-dialog class="flex vertical list-dialog" :lock-scroll="false" :title="title" v-model="show" width="100%" :show-confirm-button="false">
    <div slot="title" class="list-title">
      {{title}}
      <div class="flex  align-center justify-center right" @click="close">
        <vant-icon name="close" />
      </div>
    </div>
    <app-list v-if="list.length" :loading="loading" :finished="finished">
      <vant-cell v-for="item in list" :key="item.id" @click="change(item)">
        <slot v-bind="item" />
      </vant-cell>
    </app-list>
    <div v-else-if="!this.isSearched" class="searching">正在查询</div>
    <div v-else class="no-data">暂无数据</div>
  </van-dialog>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '历史记录'
    },
    list: {
      type: Array,
      default() {
        return []
      }
    },
    value: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      show: this.value,
      isSearched: false,
      loading: false,
      finished: false,
    }
  },
  watch: {
    value(v) {
      this.show = v
    },
    show(v) {
      this.$emit('input', v)
    }
  },
  methods: {
    change(item){
      this.$emit('change',item)
      this.close();
    },
    close(){
      this.show = false
    },
    getData(promise) {
      this.isSearched = true
      this.loading = true
      promise.then(({ isFinished = false } = {}) => {
        isFinished && (this.finished = isFinished);
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
.list-dialog{
  width: 92%;
  max-height: 92%;
  min-height:40%;
  top: 50%;
   & /deep/ .van-dialog__header{
    position: relative;
    padding:0;
  }
  & /deep/ .van-dialog__content{
    flex:1;
    overflow: auto;
  }
  .list-title{
    padding:10px;
    text-align: center;
    .right{
      position:absolute;
      top:0;
      right:0;
      bottom:0;
      padding: 10px;
    }
  }
}
.searching{
  text-align: center;
}
.no-data{
  text-align: center;
}
</style>